<template>
  <div class="login-content">
    <div>
      <div>
        <el-button type="text" @click="dialogVisible = true">新增</el-button>
        <el-dialog title="新增聊天室" :visible.sync="dialogVisible">
          <el-form :model="form">
            <el-form-item label="名称" :label-width="formLabelWidth">
              <el-input v-model="form.discussTitle" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="加入方式:" :label-width="formLabelWidth">
              <el-select v-model="form.visibleType" placeholder="请选择加入方式:">
                <el-option label="自由加入" value="1"></el-option>
                <el-option label="邀请加入" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <el-table
        :data="discussList"
        border
        style="width: 100%"
        @cell-dblclick="clickHandle">
        <el-table-column prop="discussId" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="discussTitle" label="名称" width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DiscussList',
  data () {
    return {
      discussList: [],
      form: {
        discussTitle: '',
        visibleType: ''
      },
      dialogVisible: false
    }
  },
  mounted () {
    this.getDiscussList()
  },
  methods: {
    getDiscussList () {
      let data = {
        'userId': 'caeca614906f4b3a9e6cfd352f016e86'
      }
      this.$axios({
        method: 'post',
        url: `/discuss/list`,
        data: this.$qs.stringify(data)
      }).then(res => {
        if (res.data.errorCode !== 0) {
          this.$message.error(res.data.errorMsg)
        } else {
          let list = []
          res.data.data.forEach(x => {
            let obj = {}
            Object.assign(obj, {'discussId': x.discussId})
            Object.assign(obj, {'discussTitle': x.discussTitle})
            list.push(obj)
          })
          this.discussList = list
        }
      })
    },
    submitForm () {
      let data = {
        'discussTitle': this.form.discussTitle,
        'userId': 'caeca614906f4b3a9e6cfd352f016e86',
        'visibleType': this.form.visibleType
      }
      this.$axios({
        method: 'post',
        url: `/discuss/add`,
        data: this.$qs.stringify(data)
      }).then(res => {
        if (res.data.errorCode !== 0) {
          this.$message.error(res.data.errorMsg)
        } else {
          this.msgContent = ''
          this.$message.success(res.data.errorMsg)
          this.getDiscussList()
          this.dialogVisible = false
        }
      })
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    clickHandle (row) {
      this.$router.push({path: '/discuss/discussDetail', query: {id: row.discussId}})
    }
  }
}
</script>

<style scoped>
  .login-content {
    position: relative;
    width: 70%;
    height: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
</style>
